<template>
  <div class="home">
    <h1 class="title">智力方舟题库系统</h1>
    <p class="version">{{ version }}</p>
    <ul v-if="notLogin" class="actions">
      <li>
        <mu-button color="primary" @click="login()">登录</mu-button>
      </li>
    </ul>
    <ul v-else class="actions">
      <li>
        <mu-button color="primary" @click="startMake()">开始出题</mu-button>
      </li>
      <li>
        <mu-button color="primary" @click="showStatus()">题库状态</mu-button>
      </li>
      <li>
        <mu-button color="#ffbf27" @click="startExam()">开始做题</mu-button>
      </li>
      <li>
        <mu-button v-if="isAuditor" color="secondary" @click="startCheck()">开始审题</mu-button>
      </li>
      <li>
        <mu-button v-if="isAuditor" color="secondary" @click="toTypes()">分类管理</mu-button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { version } from '@/main'

export default {
  name: 'Home',
  computed: {
    ...mapGetters({
      userInfo: 'auth/userInfo'
    }),
    notLogin() {
      return this.userInfo === null
    },
    isAuditor() {
      return this.userInfo ? this.userInfo.role > 1 : false
    },
    version() {
      return version
    }
  },
  methods: {
    startMake() {
      this.$router.push({ name: 'Questions' })
    },
    showStatus() {
      this.$router.push({ name: 'Info' })
    },
    startCheck() {
      this.$router.push({ name: 'Check' })
    },
    startExam() {
      this.$router.push({ name: 'Exam' })
    },
    login() {
      this.$router.push({ name: 'Login' })
    },
    toTypes() {
      this.$router.push({ name: 'Types' })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  text-align: center;
}
.title {
  margin-bottom: 0;
}
.version {
  font-size: 0.5em;
  color: #aaa;
}
.actions {
  list-style: none;
  margin-top: 200px;
}
.actions li {
  margin: 10px;
}
</style>
